<template>
  <div class="main_tab_bar">
    <tab-bar>
      <tab-bar-item
        path="/home"
        activeColor="yellow"
        activeColorIcon="pink"
        noActiveColor="grey"
      >
        <i slot="icon" class="el-icon-house"></i>
        <i slot="active-icon" class="el-icon-s-home"></i>
        <div slot="context">首页</div>
      </tab-bar-item>
      <!-- 
      <router-link :to="path"> -->
      <tab-bar-item path="category">
        <i slot="icon" class="el-icon-document-copy"></i>
        <i slot="active-icon" class="el-icon-s-order"></i>
        <div slot="context">分类</div>
      </tab-bar-item>
      <!-- </router-link>
      <router-link to="/shopcat"> -->
      <tab-bar-item path="shopcat">
        <i slot="icon" class="el-icon-shopping-cart-2"></i>
        <i slot="active-icon" class="el-icon-s-goods"></i>
        <div slot="context">购物车</div>
      </tab-bar-item>
      <!-- 
      <router-link to="/profile"> -->
      <tab-bar-item path="profile">
        <i slot="icon" class="el-icon-user"></i>
        <i slot="active-icon" class="el-icon-s-custom"></i>
        <div slot="context">我的</div>
      </tab-bar-item>
      <!-- </router-link> -->
    </tab-bar>
  </div>
</template>

<script>
import TabBar from "../common/tabbar/tabBar.vue";
import tabBarItem from "../common/tabbar/tabBarItem.vue";
export default {
  name: "mainTabBar",
  components: {
    TabBar,
    tabBarItem,
  },
};
</script>

<style>
</style>